    <template>
  <!-- 主页背景 -->
  <index />
  <div class="pop">
    <div class="tips">使用智能黑板系统前需先登录</div>
    <div class="main">
      <div class="title">登录</div>
      <div class="inputBox">
        <img src="../assets/输入头像.png" style="margin: 0px 30px 0px 30px" />
        <input type="text" placeholder="请输入账号" v-model="username"/>
      </div>
      <div class="inputBox">
        <img src="../assets/输入验证码.png" style="margin: 0px 30px 0px 30px" />
        <input type="password" placeholder="请输入密码" v-model="password"/>
      </div>
      <div class="navTo">
        <p @click="navToRegister()">没有账号？<u>请注册</u></p>
        <p @click="switchQRcode()"><u>选择用其他方式登录</u></p>
      </div>
      <el-button type="info" plain size="large"  @click="login()">登录</el-button>
    </div>
    <img src="../assets/返回.png" class="back" @click="back" />
  </div>
</template>
    
<script setup>
import router from "@/router";
import store from "@/store";
import axios from "axios";
import { inject, ref } from "vue";

const username = ref();
const password = ref();
const address = inject("address");
const axiosConfig = inject('axiosConfig')

//登录
async function login() {
  //验证账号密码是否为空
  if(!username.value && !password.value){
    alert("请输入账号密码！")
    return;
  }
  //发送数据
  await axios({
    url: address + "admin/user/login",
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: {
      username:username.value,
      password:password.value
    },
  })
    .then((res) => {
      console.log("登录接口连接成功！", res.data);
      if(res.data.code != 403){ //登陆成功
        //把用户信息存到全局变量中
        store.commit('setUserData',{
          username:username.value,
          password:password.value, 
          userId:res.data.data.userId
        })
        console.log('已登录的用户信息',store.state.userData)
        router.push('/')
      }else{
        alert('登陆失败！')
      }
    })
    .catch((error) => {
      console.error("登录失败！", error);
      return;
    });

  //假数据（实在不行就用这个）
  // if(username.value = 'fhl' && password.value == '123'){
  //     store.commit('setUserData',{
  //       username:'fhl',
  //       password:password.value,
  //       userId:1
  //     })
  // }
  // if(username.value = 'yjh' && password.value == '1234'){
  //     store.commit('setUserData',{
  //       username:'yjh',
  //       password:password.value,
  //       userId:2
  //     })
  // }
  back();
}

//跳转
function switchQRcode() {
  router.push("/QRcode");
}
function back() {
  router.push("/");
}
function navToRegister() {
  router.push("/register");
}
</script>
    
<style scoped>
.pop {
  width: 50rem;
  height: 31.25rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  background-color: rgb(245, 245, 245);
  border: 5px solid rgb(224, 224, 224);
  box-shadow: 0px 4px 10px gray;
  display: flex;
  align-items: center;
  justify-self: center;
}

.main {
  height: auto;
  width: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 2rem;
}

.inputBox {
  width: 21.875rem;
  height: 3.125rem;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(18, 135, 222);
  box-shadow: 0px 4px 10px gray;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 20px 0px 5px 0px;
}

.inputBox input {
  border: none; 
  outline: none; 
  box-shadow: none; 
  font-size: 1rem;
}

.inputBox img{
  width: 25px;
  height: auto;
}

.navTo{
  text-align: center;
  cursor: pointer;
}

.tips {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.el-button--large {
  width: 12.5rem;
}
.back {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}
</style>
    